<template>
  <!--传统下单-->
  <div>
    <div>
      <div class="tabdiv"></div>
      <div class="transaction_in">
        <div class="transaction_in_right">
          <div>
            <div class="divTab" v-show="nowIndex === 0">
              <div class="Twokey" style="margin-top: 1rem;">
                <span class="twokey_title">合约</span>
                <select v-model="namesp" id="select" style="padding-left:10px;width:150px;height:25px;border-radius: 3px;background-color:#FAEEEE;">
                  <option :value="item.name_code" v-for="(item, index) in list" :key="index">{{ item.name_code + '-' + item.name }}</option>
                </select>
                <div class="twokey_right"></div>
              </div>
              <div class="radiodiv">
                <span>方向</span>
                <label class="buycolor" style="color: #000;">
                  <input @click="getbuy = true" checked type="radio" name="type1" value="4" />
                  买入
                </label>
                <label class="cellcolor" style="color: #000;">
                  <input @click="getbuy = false" type="radio" name="type1" value="5" />
                  卖出
                </label>
              </div>
              <!-- <div class="radiodiv">
                <span>开平</span>
                <label style="color: #000;">
                  <input @click="getRadioVal" checked type="radio" name="typeliang" value="1" />
                  开仓
                </label>
                <label style="color: #000;">
                  <input @click="getRadioVal" type="radio" name="typeliang" value="2" />
                  平仓
                </label>
                <label style="color: #000;">
                  <input @click="getRadioVal" type="radio" name="typeliang" value="3" />
                  平今
                </label>
              </div> -->
              <div class="Twokey_divin">
                <div class="Twokey_in">
                  <div class="Twokey">
                    <span class="twokey_title">手数</span>
                    <input class="twokey_hands" v-model="Numberhand" type="number" name="number" value="1" min="1" />
                  </div>
                  <div class="Twokey">
                    <span class="twokey_title">市价</span>
                    <input class="twokey_hands" v-model="price" type="number" name="number" value="1" min="1" @input="changeprice" />
                    <!-- <select
                      v-model="typename" style="width: 100px;margin-right: 10px;"
                      id="select"
                      style="width:50px;height:22px;border-radius: 3px;background-image: linear-gradient(to bottom,#F2F2F2,#ECECEC,#D1D1D1,#CFCFCF);"
                      @click="change(typename)"
                    >
                      <option :value="coupon.name" v-for="(coupon, index) in typeList" :key="index">{{ coupon.name }}</option>
                    </select> -->
                  </div>
                  <div class="Twokey">
                    <span class="twokey_title">止盈价格</span>
                    <input class="twokey_hands" v-model="profit_price" type="number" name="number" value="1" min="1" style="width: 45%;" />
                  </div>
                  <div class="Twokey">
                    <span class="twokey_title">止损价格</span>
                    <input class="twokey_hands" v-model="loss_price" type="number" name="number" value="1" min="1" style="width: 45%;" />
                  </div>
                  <!-- <div style="display: flex;justify-content: flex-start;margin-top: 0.7rem;"> -->
                  <!-- <div class="reset" @click="see()">
										<span>查可开</span>
									</div> -->
                  <!-- </div> -->
                </div>
                <div class="Twokey_isn_right">
                  <div class="reset" @click="priceprict = true"><span>复&nbsp;位</span></div>
                  <div class="Business_left" v-if="getbuy" @click="btnlist && business(selldis)"><span class="Business_left_font">下&nbsp;单</span></div>
                  <div class="Business_left" v-else @click="btnlist && selldiss(buydis)" style="background: green;"><span class="Business_left_font">下&nbsp;单</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    optionlist: state => state.trade.optionlist /* 全部合约代码 */
  }),
  watch: {
    namesp(val) {
      for (let i = 0; i < this.list.length; i++) {
        if (val == this.list[i].code2) {
          return this.$store.commit('trade/select', this.list[i]);
        }
      }
    },
    price(val) {
      // console.log(val);
      if (this.priceprict == false) {
        this.selldis = val; //卖价显示
        this.buydis = val;
      }
    },
    ticket(val) {
      if (this.priceprict == true) {
        this.price = ((val[this.select.code2] && val[this.select.code2].price) || 0).toFixed(2);
        this.buydis = ((val[this.select.code2] && val[this.select.code2].price) || 0).toFixed(2);
        // this.buydis = ((val[this.select.code2] && val[this.select.code2].bid) || 0).toFixed(2);
        this.selldis = ((val[this.select.code2] && val[this.select.code2].price) || 0).toFixed(2);
        // this.selldis = ((val[this.select.code2] && val[this.select.code2].ask) || 0).toFixed(2);
      }
    },
    select(val) {
      this.priceprict = true;
      // console.log(val)
      this.namesp = val.name_code;
      this.price = ((val[this.select.code2] && val[this.select.code2].price) || 0).toFixed(2);
      // this.buydis = ((val[this.select.code2] && val[this.select.code2].bid) || 0).toFixed(2);
      // this.selldis = ((val[this.select.code2] && val[this.select.code2].ask) || 0).toFixed(2);
      this.buydis = ((val[this.select.code2] && val[this.select.code2].price) || 0).toFixed(2);
      this.selldis = ((val[this.select.code2] && val[this.select.code2].price) || 0).toFixed(2);
    }
  },
  data() {
    return {
      getbuy: true,
      btnlist: true,
      list: [], //合约名称
      oneitem: {},
      nowIndex: 0,
      namesp: '', //合约
      radioVal: '1', //开仓类型
      Numberhand: '', //手数
      price: '', //价格
      priceprict: true, //买卖价格变动
      profit_price: 0 /* 止盈价格 */,
      loss_price: 0 /* 止损价格 */,
      typename: '', //投机类型
      selldis: '', //卖价显示
      buydis: '', //买家显示
      buyVal: '4', //买入卖出显示
      disbuy: true, //买入按钮模块
      dissell: false, //卖出按钮模块
      disscond: false, //条件单
      typeList: [
        {
          name: '>=',
          id: 1
        },
        {
          name: '<=',
          id: 2
        }
      ] //方式
    };
  },
  created: function() {
    for (let i in this.optionlist) {
      this.list.push(this.optionlist[i]);
    }
    // this.list = this.optionlist;
    this.namesp = this.select.name_code;
    this.price = ((this.ticket[this.select.code2] && this.ticket[this.select.code2].price) || 0).toFixed(2);
    this.buydis = ((this.ticket[this.select.code2] && this.ticket[this.select.code2].price) || 0).toFixed(2);
    // this.buydis = ((this.ticket[this.select.code2] && this.ticket[this.select.code2].bid) || 0).toFixed(2);
    this.selldis = ((this.ticket[this.select.code2] && this.ticket[this.select.code2].price) || 0).toFixed(2);
    // this.selldis = ((this.ticket[this.select.code2] && this.ticket[this.select.code2].ask) || 0).toFixed(2);
  },
  mounted() {},
  methods: {
    /* 价格输入方式切换 */
    changeprice() {
      this.priceprict = false;
    },
    change(listinfo) {
      // console.log(listinfo);
    },
    /* 切换select*/
    changeslect(code) {
      // console.log(code);
      this.priceprict = true;
      for (let i = 0; i < this.list.length; i++) {
        if (code == this.list[i].code) {
          return this.$store.commit('trade/select', this.list[i]);
        }
      }
    },
    //买入
    business(num) {
      this.btnlist = false;
      if (this.Numberhand == '') {
        this.btnlist = true;
        return this.$notify.error('请输入手数');
      }
      if (this.priceprict == false) {
        if (this.selldis == this.price) {
          var buylist = {
            symbol_id: this.select.code2,
            cmd: 'NOW',
            rise_fall: 'RISE',
            price: num,
            volume: this.Numberhand,
            stop_profit_price: this.profit_price /* 止盈价格 */,
            stop_loss_price: this.loss_price /* 止损价格 */
          };
        } else {
          var buylist = {
            symbol_id: this.select.code2,
            cmd: 'NOW',
            rise_fall: 'RISE',
            // price: num,
            volume: this.Numberhand,
            stop_profit_price: this.profit_price /* 止盈价格 */,
            stop_loss_price: this.loss_price /* 止损价格 */
          };
        }
      } else {
        var buylist = {
          symbol_id: this.select.code2,
          cmd: 'NOW',
          rise_fall: 'RISE',
          // price: num,
          volume: this.Numberhand,
          stop_profit_price: this.profit_price /* 止盈价格 */,
          stop_loss_price: this.loss_price /* 止损价格 */
        };
      }
      var that = this;
      var bool = false;
      this.$layer.open({
        content: '确定买入' + this.Numberhand + '手' + this.namesp + ', 是否继续?',
        btn: ['确定', '取消'],
        yes: function(index, layero) {
          //按钮【按钮一】的回调
          if (!bool) {
            bool = true;

            that.$post('addons/tf-futures/order/open-with-price', buylist).then(res => {
              // console.log(res);
              that.$layer.closeAll();
              that.btnlist = true;
              bool = false;
              if (res.code == 200) {
                that.$notify.success(res.message || '开仓成功');
              } else {
                that.$notify.error(res.message || '开仓失败');
              }
            });
          }
        },
        btn2: function(index, layero) {
          that.$layer.closeAll();
          that.btnlist = true;
          that.$notify({
            type: 'info',
            message: '已取消购买'
          });
        },
        cancel: function() {
          //右上角关闭回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
    },
    /* 卖出 */
    selldiss(num) {
      this.btnlist = false;
      if (this.Numberhand == '') {
        this.btnlist = true;
        return this.$notify.error('请输入手数');
      }
      if (this.priceprict == false) {
        if (this.selldis == this.price) {
          var buylist = {
            symbol_id: this.select.code2,
            cmd: 'NOW',
            rise_fall: 'FALL',
            price: num,
            volume: this.Numberhand,
            stop_profit_price: this.profit_price /* 止盈价格 */,
            stop_loss_price: this.loss_price /* 止损价格 */
          };
        } else {
          var buylist = {
            symbol_id: this.select.code2,
            cmd: 'NOW',
            rise_fall: 'FALL',
            // price: num,
            volume: this.Numberhand,
            stop_profit_price: this.profit_price /* 止盈价格 */,
            stop_loss_price: this.loss_price /* 止损价格 */
          };
        }
      } else {
        var buylist = {
          symbol_id: this.select.code2,
          cmd: 'NOW',
          rise_fall: 'FALL',
          // price: num,
          volume: this.Numberhand,
          stop_profit_price: this.profit_price /* 止盈价格 */,
          stop_loss_price: this.loss_price /* 止损价格 */
        };
      }
      var that = this;
      var bool = false;
      this.$layer.open({
        content: '确定卖出' + this.Numberhand + '手' + this.namesp + ', 是否继续?',
        btn: ['确定', '取消'],
        yes: function(index, layero) {
          //按钮【按钮一】的回调
          if (!bool) {
            bool = true;

            that.$post('addons/tf-futures/order/open-with-price', buylist).then(res => {
              // console.log(res);
              that.$layer.closeAll();
              that.btnlist = true;
              bool = false;
              if (res.code == 200) {
                that.$notify.success(res.message || '开仓成功');
              } else {
                that.$notify.error(res.message || '开仓失败');
              }
            });
          }
        },
        btn2: function(index, layero) {
          that.$layer.closeAll();
          that.btnlist = true;
          that.$notify({
            type: 'info',
            message: '已取消购买'
          });
        },
        cancel: function() {
          //右上角关闭回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
    },
    //选择开平方式
    getRadioVal(e) {}
    //方向
    // getbuy(e) {}
  }
};
</script>
<style scoped>
.tabs {
  height: 1.5rem;
  line-height: 1.3rem;
  color: #333333;
  display: flex;
  justify-content: flex-start;
  margin-top: 0.5rem;
}

.li-tab {
  width: 5rem;
  height: 1.3rem;
  display: inline-block;
  text-align: center;
  font-size: 0.8rem;
  margin-right: 3px;
  background-color: #c6d9f0;
  border: #a3bddc solid 1px;
  border-radius: 0.3rem;
}

.divTab {
  width: 20.5rem;
  height: 16rem;
  /* background-color: #ffffff; */
  /* margin-top: -0.95rem; */
}

.active {
  background: #ffffff;
  color: #333333;
}

.Twokey {
  width: 100%;
  height: 2.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.twokey_title {
  font-size: 0.8rem;
  color: #333333;
  margin-left: 5%;
  margin-right: 1rem;
}

.Twokey_divin {
  width: 100%;
  height: 11rem;
  display: flex;
  justify-content: flex-start;
}

.twokey_inp {
  width: 50%;
  height: 1.4rem;
}

.twokey_right {
  width: 0.4rem;
  height: 1.4rem;
  margin-left: 0.5rem;
}

.radiodiv {
  padding-left: 1rem;
  box-sizing: border-box;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  /* background-color: #00A2E8; */
}

.radiodiv_Purchase {
  color: #e15546;
  margin-left: 2rem;
}

.radiodiv_Sellout {
  color: #3f9e0e;
}

.twokey_hands {
  width: 60%;
  height: 1.4rem;
  border-radius: 0.2rem;
  padding-left: 5px;
}

.Twokey_in {
  width: 55%;
  height: 9.5rem;
  /* background-color: #00A2E8; */
  /* border-right: #a3bddc solid 1px; */
}
.Twokey2 {
  width: 50%;
  height: 40px;
  float: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.twokey2_title {
  font-size: 12px;
  color: #333333;
  margin-left: 5%;
  margin-right: 16px;
}
.twokey2_hands {
  width: 40%;
  height: 23px;
  border-radius: 2px;
  padding-left: 5px;
}

.Business {
  /* width: 15%; */
  height: 4rem;
  /* background-color: #3F9E0E; */
  margin-top: 1rem;
  display: flex;
  justify-content: flex-start;
}

.Business_left {
  width: 7.5rem;
  margin-top: 3rem;
  height: 3rem;
  background-color: #fe2424;
  border-radius: 0.2rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  cursor: default;
}

.Business_right {
  width: 7.5rem;
  margin-top: 4rem;
  height: 3rem;
  background-color: #007f00;
  border-radius: 0.2rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.Business_left_bor {
  width: 4rem;
  height: 0.05rem;
  background-color: #9d3b2f;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

.Business_left_font {
  color: #ffffff;
  font-size: 25px;
}

.Twokey_isn_right {
  width: 40%;
  height: 11rem;
}

.isn_right_mai {
  width: 100%;
  height: 2.5rem;
  display: flex;
  justify-content: flex-start;
  padding-left: 1rem;
  box-sizing: border-box;
  align-items: center;
}

.isn_right_mai_left {
  width: 1.5rem;
  height: 1.5rem;
  /* border: #e15546 solid 1px; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e15546;
  margin-right: 0.7rem;
}

.isn_right_mai_rissght {
  width: 1.5rem;
  height: 1.5rem;
  /* border: #3f9e0e solid 1px; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3f9e0e;
  margin-right: 0.7rem;
}

.isn_right_mai_right {
  width: 5rem;
  height: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  color: #333333;
  font-size: 0.8rem;
  /* background-color: #e15546; */
}

.reset {
  width: 35%;
  height: 1.5rem;
  border: #003c74 solid 1px;
  background-image: linear-gradient(to bottom, #fefefe, #f6f6f2, #e2dfd6);
  margin-left: 0.6rem;
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
  font-size: 0.8rem;
  border-radius: 0.3rem;
}

/*条件单*/
.stoppo {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* background-color: red; */
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 101;
}
</style>
